<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <title>部门管理</title>
    <%@ include file="/include/openstyles.jsp" %>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.core-3.5.js"></script>
    <!-- 树插件核心 -->
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.exedit-3.5.js"></script>
    <!-- 树编辑插件 -->
    <style>
        .help-block {
            margin: 0px !important;
        }
    </style>
</head>
<body>

<div class="row xtgltree">
    <input type="text" id="selectDepId" style="display:none"/>
    <input type="text" id="selectDepName" style="display:none"/>
    <div class="col-sm-12">
        <div class="widget-box widget-color-blue2"
             style="width:100%height:600px;min-height:420px; height:auto!important">
            <div class="widget-header">
                <h4 class="widget-title lighter smaller">选择部门</h4>
            </div>
            <div class="widget-body">
                <div class="widget-main padding-8">
                    <div class="zTreeDemoBackground">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
    //导入脚本
    var scripts = [null, null];

    /**
     * 设置全局变量
     */
    var tree = "treeDemo";//树id
    var $tree = $("#treeDemo");
    var zTree; //树对象
    ace.load_ajax_scripts(scripts, function () {
        jQuery(function ($) {
            var setting = {
                async: {
                    autoParam: ["id=id"],
                    enable: true,
                    type: "GET",
                    dataType: 'json',
                    url: "${ctx}/${frameworkPath}/org/children"
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                data: {								//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes
                    simpleData: {					//数据是否采用简单数据模式 (Array)
                        enable: true  				//不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
                    }
                },
                callback: {
                    onClick: onClick,				//树节点点击事件
                    onAsyncSuccess: onAsyncSuccess	//加载完成后回调
                }
            };
            zTree = $.fn.zTree.init($tree, setting); //树初始化

            /**
             * 数据加载完成后触发事件
             */
            function onAsyncSuccess() {
                treeOnAsyncSuccess();//数据加载完成后触发事件
            }

        });

    });

    /**
     *    树节点点击事件
     */
    function onClick(event, treeId, treeNode, clickFlag) {
        $("#selectDepId").val(treeNode.id);
        $("#selectDepName").val(treeNode.name);
    }


    /**
     * 数据加载完成后触发事件
     */
    var treeOnAsyncSuccess = function () {
        asyncNodes(zTree.getNodes());
        zTree.expandAll(true);
    }

    function asyncNodes(nodes) {
        if (!nodes) return;
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            }
            else {
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function getOrg() {
        var retObj = new Object();
        retObj.state = true;
        retObj.orgId = $("#selectDepId").val();
        retObj.orgName = $("#selectDepName").val();

        return retObj;
    }
</script>
</body>
</html>